<script setup lang="ts">
const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  activeStep?: number,
}
const props = withDefaults(defineProps<Props>(), {
  activeStep: 1,
});
</script>

<template>
  <ElCard>
    <template #header>
      <span class="title">{{t('usageGuide')}}</span>
    </template>
    <ElSteps :active="props.activeStep" class="steps">
      <ElStep :title="t('toPurchase')" :description="t('toPurchaseTip')" />
      <ElStep :title="t('toTurnOnFirewall')">
        <template #description>
          <div class="tip-view">
            <div>{{t('toTurnOnFirewallTip')}}</div>
            <RouterLink :to="{ name: 'switches.internetPerimeter' }">
              <ElButton class="route-button">{{t('toTurnOnFirewall')}}</ElButton>
            </RouterLink>
          </div>
        </template>
      </ElStep>
      <ElStep :title="t('toTurnOnAccessControl')">
        <template #description>
          <div class="tip-view">
            <div>{{t('toTurnOnAccessControlTip')}}</div>
            <RouterLink :to="{ name: 'accessControls.internetPerimeter' }">
              <ElButton class="route-button">{{t('accessControl')}}</ElButton>
            </RouterLink>
          </div>
        </template>
      </ElStep>
      <ElStep :title="t('toTurnOnIntrusionDefense')">
        <template #description>
          <div class="tip-view">
            <div>{{t('toTurnOnIntrusionDefenseTip')}}</div>
            <RouterLink :to="{ name: 'intrusionDefense.configs' }">
              <ElButton class="route-button">{{t('intrusionDefense')}}</ElButton>
            </RouterLink>
          </div>
        </template>
      </ElStep>
    </ElSteps>
  </ElCard>
</template>

<i18n lang="yaml" locale="zh-CN">
  usageGuide: '使用指引'
  toPurchase: '购买配额'
  toPurchaseTip: '请点击右上方“购买云防火墙（原生版）”。'
  toTurnOnFirewall: '开启防护'
  toTurnOnFirewallTip: '使用云防火墙（原生版）服务，您需要为需要防护的IP“开启防护”。'
  toTurnOnAccessControl: '设置访问控制'
  toTurnOnAccessControlTip: '开启防护后，请设置访问控制策略。'
  accessControl: '访问控制'
  toTurnOnIntrusionDefense: '设置入侵防御'
  toTurnOnIntrusionDefenseTip: '开启防护后，请设置入侵防御策略。'
  intrusionDefense: '入侵防御'
</i18n>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  font-weight: bold;
}

.steps {
  padding: 0 20px;
  margin: 20px 145px 20px 0;
}

.tip-view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 98px;
}

.route-button {
  width: 208px;
}
</style>
